import React from 'react'
import "./index.css"
// 引入下载的nanoid
import { nanoid } from 'nanoid'

// 在这里接收父组件传回的todoList数据和setTodoList方法
export default function Header({ todoList, setTodoList }) {
  // 发布事件函数
  // 1.来判断我们是否点的是回车键
  const publishHandle = (e) => {
    // 2.通过键码判断我们点击的是否是回车键,通过事件对象获取
    if (e.keyCode !== 13) return

    // 3.通过事件对象获取输入的内容,来判断是否输入是否为空,如果为空直接return
    const publishValue = e.target.value.trim()
    if (!publishValue) return alert('请输入正确内容')

    // 4.创建新的todo对象,往列表上添加
    const newTodo = { id: nanoid(), todo: publishValue, done: false }

    // 5.调用父组件传递过来的setTodoList,将创建的newTodo数据添加上去
    // 这里要用数组的方式传参进去,因为元数据就是数组列表,并且要把已经存在的todoList数据也扩展上去
    setTodoList([newTodo, ...todoList])

    // 6.最后清空输入框
    e.target.value = ""
  }


  return (
    <div className="todo-header">
      <input type="text" onKeyUp={publishHandle} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
